<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>景区详情</title>
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
    <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
    <script th:src="@{/other/UserJS.js}"></script>
    <!-- 加载地图JSAPI脚本 -->
    <script src="https://webapi.amap.com/maps?v=2.0&key=你的key"></script>
</head>
<body>
<!--景区详细信息页面-->
<div id="head" th:include="common/header"></div>
<div style="padding: 50px">
    <div class="container" style="width: 1350px;height: auto;margin-left: auto;margin-right: auto">
        <div class="layui-border" style="margin-left: auto;margin-right: auto;margin-bottom: 40px;padding: 20px;position: relative;box-shadow: darkgrey 0 0 30px 5px">
            <img th:src="${sspot.getPicture()}" width="400px" height="auto" alt="" style="margin: 20px;border-radius: 10%">
            <p th:text="${sspot.getSspotname()}" id="sspotname" style="position:absolute;margin-left:440px;top:60px;font-size: 30px;color: black">景区名</p>
            <p style="position: absolute;margin-left: 450px;top: 140px">地址：</p>
            <p th:text="${sspot.getAddress()}" style="position: absolute;margin-left: 500px;top: 140px" id="address">景区地址</p>
            <p style="position: absolute;margin-left: 450px;top: 180px">评分：</p>
            <p th:text="${sspot.getScore()}" style="position: absolute;margin-left: 500px;top: 180px">评分</p>
            <p style="position: absolute;margin-left: 440px;top: 220px">等级(A):</p>
            <p th:text="${sspot.getAnum()}" style="position: absolute;margin-left: 500px;top: 220px"></p>
            <p style="position: absolute;margin-left: 560px;top: 180px">I价格:</p>
            <!--高德地图占用的div-->
            <div id="GDMap" style="float: right;width: 500px;height: 300px"></div>
            <!--存放收藏按钮的位置-->
            <span style="clear: both;float: right;margin-right: 600px;margin-top: -110px">
                <i class="layui-icon layui-icon-heart" id="kongxin"  style="font-size: 30px; color: #ff5747" title="加入收藏？"></i>
                <i class="layui-icon layui-icon-heart-fill" id="shixin" style="font-size: 30px; color: #ff5747;display: none" title="取消收藏？"></i>
            </span>
            <p th:text="${sspot.getPrice()}" style="position: absolute;margin-left: 600px;top: 180px"></p>
<!--            <div id="GDMap" style="width: 200px;height: auto"></div>-->
        </div>
        <div class="introducesspot">
            <h1><b>景区介绍</b></h1>
            <br>
            <p style="font-size: 18px" th:text="${sspot.getIntroduce()}"></p>
        </div>
        <!--餐厅推荐  分割线-->
        <div style="width: 1350px;margin-right: auto;margin-left: auto;margin-top: 40px">
            <i class="layui-icon layui-icon-heart-fill" style="font-size: 60px;color: #f93c3a"></i>
            <p style="margin-top: 20px;font-size: 20px;float: right;margin-right: 1200px"><b>餐厅推荐</b></p>
            <div class="fengexian1" style="width: 1350px;height: 1px;background-color: black;margin-left: auto;margin-right:auto "></div>
        </div>
        <span th:if="${restaurants != null}">
            <div class="restaurent>" style="width:1350px;margin-left: auto;margin-right: auto;height: auto">
                <span th:each="restaurants:${restaurants}">
                    <div style="background-color: #d8dcea;height: 240px;width: 270px;float: left;margin: 30px 30px;border-radius: 5%">
                        <a th:href="@{/index/toResDeatil(restaurantname=${restaurants.getRestaurantname()})}" title="点击前往详情">
                            <img th:src="${restaurants.getPicture()}" width="250px" height="auto" alt="" style="border-radius: 10%;margin: 10px 10px">
                        </a>
                        <p style="text-align: center;font-size: 20px;margin-right: auto;margin-left: auto" th:text="${restaurants.getRestaurantname()}"></p>
                    </div>
                </span>
            </div>
        </span>
        <span th:if="${restaurants.isEmpty()}">
            <h3 style="font-size: 16px;margin-top: 50px">暂无推荐，如有推荐请联系我哦~ 2329826787@qq.com</h3>
        </span>
    </div>
</div>

<!--隐藏部分，用作获取景区的经纬度-->
<span style="display: none">
    <p th:text="${sspot.getLocationX()}" id="locationX">景区经度</p>
    <p th:text="${sspot.getLocationY()}" id="locationY">景区纬度</p>
</span>
<!--底部文件-->
<span id="foot" th:include="common/footer"></span>
<script>
    //高德地图api接口
    var locationx = $('#locationX').text();  //获取景点的经度
    var locationy = $('#locationY').text()  //获取景点的纬度
    //地图初始化
    var map = new AMap.Map('GDMap', {
        viewMode: '3D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D',
        zoom:15, //初始化地图层级
        center: [locationx,locationy] //初始化地图中心点
    });
    //指示标 在地图上显示景区的地址内容
    var infoWindow = new AMap.InfoWindow({
        anchor: 'bottom-left',
        content: $('#address').text(),
    });
    infoWindow.open(map,[locationx, locationy]);

</script>
</body>
</html>